<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>用户列表</title>
	<link rel="stylesheet" href="${ctx}/statics/css/bootstrap.min.css" />
	<link rel="stylesheet" href="${ctx}/statics/css/font-awesome.min.css" />
	<link rel="stylesheet" href="${ctx}/statics/js/layer/skin/default/layer.css" />
	<link rel="stylesheet" href="${ctx}/statics/js/bootstrap-table/bootstrap-table.css" />
	<link rel="stylesheet" href="${ctx}/statics/js/toastr/toastr.css" />
	

	
</head>
<body>

<!-- 添加和编辑模态窗口 -->
<div class="modal fade" id="entityModal" role="dialog"
	aria-labelledby="userModelLabel" aria-hidden="true"
	data-backdrop="false">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">添加客户</h4>
			</div>
			<div class="modal-body">
				<form id="entity_edit_form" class="form-horizontal">
					<input type="hidden" id="id" name="id">
					
					<div class="form-group">
						<label class="control-label col-sm-3">客户姓名：</label>
						<div class="col-sm-8">
							<input type="text" class="form-control col-sm-3" placeholder="必填"
								name="customerName">
						</div>
					</div>
					
					<div class="form-group">
						<label class="control-label col-sm-3">客户职位：</label>
						<div class="col-sm-8">
							<input type="text" class="form-control col-sm-3"
								name="customerJob">
						</div>
					</div>
					
					
					<div class="form-group">
						<label class="control-label col-sm-3">用户性别：</label>
						<div class="col-sm-8">
							<select class="form-control" id="sex" name="customerSex">
									<option value="男" selected="selected">男</option>
									<option value="女">女</option>
							</select>
						</div>
					</div>
					
					<div class="form-group">
						<label class="control-label col-sm-3">出生日期：</label>
						<div class="col-sm-8">
							<input type="date" id="birthDay" class="form-control col-sm-3"
								name="birthDay">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3">客户手机：</label>
						<div class="col-sm-8">
							<input type="text" class="form-control col-sm-3" placeholder="必填"
								name="customerMobile">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3">客户邮箱：</label>
						<div class="col-sm-8">
							<input type="text" class="form-control col-sm-3" placeholder="必填"
								name="customerEmail">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3">客户QQ：</label>
						<div class="col-sm-8">
							<input type="text" class="form-control col-sm-3"
								name="customerQq">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3">客户地址：</label>
						<div class="col-sm-8">
							<input type="text" class="form-control col-sm-3"
								name="customerAddress">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3">客户座机：</label>
						<div class="col-sm-8">
							<input type="text" class="form-control col-sm-3"
								name="customerTel">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3">客户公司：</label>
						<div class="col-sm-8">
							<input type="text" class="form-control col-sm-3"
								name="customerCompany">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3">客户来源：</label>
						<div class="col-sm-8">
							<select class="form-control" id="cs"  name="sourceId">
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3">客户类型：</label>
						<div class="col-sm-8">
							<select class="form-control" id="ct"  name="typeId">
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3">客户状态：</label>
						<div class="col-sm-8">
							<select class="form-control" id="cc"  name="conditionId">
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3">备注：</label>
						<div class="col-sm-8">
							<!-- <input type="text" class="form-control col-sm-3"
								name="customerRemark"> -->
						<textarea class="form-control col-sm-3" rows="3" cols="1" name="customerRemark"></textarea>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-sm btn-primary"
					id="entityModalBtn">确定</button>
				<button type="button" class="btn btn-sm btn-default"
					data-dismiss="modal" id="Close">关闭</button>
			</div>
		</div>
	</div>
</div>





	<div id="main-content">
	<div class="row" >
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">客户信息</div>
				<!-- /.panel-heading -->
				<div class="panel-body" >
				
			<!-- 搜索                                                                -->	
				<div class="row">
						<div class="col-xs-12">
							<!-- PAGE CONTENT BEGINS -->
							<form class="form-horizontal" role="form" id="entity_search_form">
								<div class="form-group">
									<!-- <label class="col-sm-1 control-label"> 类型 </label>
									<div class="col-sm-2">
										<input id="advertisement_type" name="type" type="text" laceholder="类型"/> 
										 <select name="type" id="type">
										 <option value="99">全部</option>
										 <option value="0">sku</option>
										 <option value="1">url</option>
										 <option value="2">前台叶子类目</option>
				        	 	         </select>
									</div> -->
									
									<div class="col-sm-4">
											<div class="input-group  ">
												<span class="input-group-addon"> <i class="icon-home"></i>
												</span> <input class="form-control input-mask-phone" type="text"
													id="form-field-mask-2" name="customerName" placeholder="客户名称">
											</div>
									</div>
									
									
									
									<!-- <label class="col-sm-1 control-label"> 展示频道 </label>
									<div class="col-sm-2">
										<input id="advertisement_showChannel" name="showChannel" type="text" laceholder="展示频道"/> 
										 <select name="showChannel" id="type">
										 <option value="0">首页</option>
										 <option value="1">详情页</option>
				        	 	         </select>
									</div>
									
									<label class="control-label col-sm-1">状态 </label>
									<div class="col-sm-2">
										<select	name="isEnabled" id="search_isEnabled">
											<option value="">全部</option>
											<option value="0">可用</option>
											<option value="1">不可用</option>
										</select>
									</div> -->
									<div class="col-sm-1">
										<button class="btn btn-sm btn-info" type="submit">
											<i class="icon-search nav-search-icon"></i>
											查询
										</button> 
									</div>
									<div class="col-sm-1">
										<button class="btn btn-sm btn-primary" type="reset"	>
											<i class="icon-undo bigger-110"></i>
											清除
										</button> 
									</div>
								</div>
							</form>
						</div>
					</div><!-- 搜索                                                                -->	
				
				<!-- 添加                                                                -->	
					<div id="entity_table_tools">  <!-- id="advertisement_table_tools" -->
						<div class="text-right">
							<button type="button" class="btn btn-success btn-sm" onclick="addData()">新增客户</button>
						</div>
					</div><!-- 添加                                                                -->	
				<!-- 主体表格                                                                -->	
					<table id="entity_table" class="table table-bordered table-hover">  <!-- id="user_table" -->
					</table><!-- 主体表格                                                                -->	
					
				</div><!-- panel body -->
			</div>
		</div>
	</div>
</div>
<%@ include file="../common.jsp" %>
<script type="text/javascript" src="${ctx}/statics/js/jquery-form/jquery.form.js"></script>
</body>
<script type="text/javascript">

$(function(){
	getCsources();
	getCtypes();
	getCconditions();
$('#entity_table').bootstrapTable({
	url: '${ctx}/customer/getList.do',
	pagination: true,
	paginationLoop: false,
	smartDisplay: false,
	striped: true,
    pageSize: 10,
    pageList: [10, 20, 50, 100],
    sidePagination: 'server',
    showRefresh: false,
    showColumns: false,
    paginationNextText:'下一页',
    paginationPreText:'上一页',
    cache: false,
	columns: [{
		field: 'id',
		title: 'ID',
		width: 50
	},{
		field: 'customerName',
		title: '客户姓名',
		width: 50
	},{
		field: 'conditionName',
		title: '客户状态',
		width: 50
	},{
		field: 'sourceName',
		title: '客户来源',
		width: 50
	},{
		field: 'userName',
		title: '所属员工',
		width: 50
	},{
		field: 'typeName',
		title: '客户类型',
		width: 50
	},{
		field: 'customerSex',
		title: '性别',
		width: 50
	},{
		field: 'customerMobile',
		title: '客户手机',
		width: 50
	},{
		field: 'customerQq',
		title: '客户QQ',
		width: 50
	},{
		field: 'customerEmail',
		title: '客户邮箱',
		width: 50
	},{
		field: 'customerJob',
		title: '职位',
		width: 50
	},{
		field: 'customerCompany',
		title: '公司',
		width: 100
	},{
		field: 'customerRemark',
		title: '备注',
		width: 150
	},{
		field: '',
		title: '操作',
		align: 'center',	
		width: 10,
		formatter: function(value, row, index){
			return '<div class="visible-md visible-lg hidden-sm hidden-xs btn-group">'
					+'<button class="btn btn-xs btn-info" id="editData" title="编辑"><i class="icon-edit bigger-130"></i></button>'
					+'<button class="btn btn-xs btn-danger" id="deleteData" title="删除"><i class="icon-trash bigger-130"></i></button></div>';
		},
		events: {
			'click #editData': editData,
			'click #deleteData': deleteData,
		}
		
	}],
	queryParams: function(params){
		//params.usreId
		$.extend(params,$("#entity_search_form").serializeJson())/* serializeJson()); */
		//console.log(params);
		return params;
	}
});

$("#entity_search_form").submit(function(e) {
	e.preventDefault();
	$('#entity_table').bootstrapTable('refresh');
});

});

function editData(e, v, row) {
	/* toastr.options.positionClass = "toast-top-center";
	if(accountType=='0'){
		toastr.warning("平台用户不能编辑店铺");
		return ;
	} */
	$("#entityModal .modal-title").empty().html("修改客户信息");
	$("#entity_edit_form").resetForm();
	$("#entity_edit_form input[name=id]").val(row.id);
	$("#entity_edit_form input[name=customerName]").val(row.customerName);
	$("#entity_edit_form input[name=birthDay]").val(row.birthDay);
	$("input[name=customerCompany]").val(row.customerCompany);
	$("input[name=customerMobile]").val(row.customerMobile);
	$("input[name=customerAddress]").val(row.customerAddress);
	$("input[name=customerQq]").val(row.customerQq);
	$("input[name=customerEmail]").val(row.customerEmail);
	
	
	$("#sex").val(row.customerSex);
	$("#cs").val(row.sourceId);
	$("#ct").val(row.typeId);
	$("#cc").val(row.conditionId);
	$("textarea").val(row.customerRemark);
	$('#entityModal').modal('show');
}
function deleteData(e, v, row) {
	/* toastr.options.positionClass = "toast-top-center";
	if(accountType=='0'){
		toastr.warning("平台用户不能删除店铺");
		return ;
	} */
	var r = confirm("你确定删除该客户吗？");
	if (r) {
		$.ajax({
			url : "${ctx}/customer/deleteDataById.do",
			type : "POST",
			data : {
				"id" : row.id
			},
			success : function(data) {
				if (data.success) {
					$('#entity_table').bootstrapTable('refreshOptions',{pageNumber : 1});
				} else {
					alert(data.errorMessage);
				}
			}
		});
	}
}

function addData(e, v, row) {
	//toastr.options.positionClass = "toast-top-center";
	/* if(accountType=='0'){
		toastr.warning("平台用户不能添加店铺");
		return ;
	} */
	$("#entity_edit_form")[0].reset();
	$("#entityModal .modal-title").empty().html("添加客户");
	$("#entity_edit_form input[name=id]").val("");
	$('#entityModal').modal('show');
}
$("#entityModal").on('click', '#entityModalBtn', function() {
	var result = checkForm();
	if (!result) {
		return false;
	}
	$.ajax({
		url : "${ctx}/customer/saveOrUpdate.do",
		type : "POST",
		data : $("#entity_edit_form").serialize(),
		success : function(data) {
			if (data.success == true) {
				$('#entityModal').modal('hide')
				$('#entity_table').bootstrapTable('refresh');
			} else {
				alert(data.errorMessage);
			}
			$("#entityModal").prop("disabled", false);
		}
	});

});
function checkForm() {
	var customerName = $("#entityModal input[name=customerName]").val();
	if (customerName.trim().length<1) {
		//toastr.warning("请填用户名称");
		alert("请填客户名称");
		return false;
	}
	
	var birthDay=$("input[name=birthDay]").val();
	if(birthDay.trim().length<1){
			alert("请选择生日时间");
			return false;
	}
	
	var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
	var customerMobile = $("input[name=customerMobile]").val();
		var flag = reg.test(customerMobile);
		if (!flag) {
		//	toastr.warning("请填正确格式的联系号码");
		    alert("请填正确格式的联系号码");
			return false;
		}
	var regForEmail=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    var customerEmail=$("input[name=customerEmail]").val();
	if(!regForEmail.test(customerEmail)){
		//	toastr.warning("请填写正确的邮箱");
		    alert("请填写正确的邮箱");
			return false;
	}
	return true;
}

function getCsources(){
	$.ajax({
		url : "${ctx}/customerSource/getAllList.do",
		type : "GET",
		data : {},
		success : function(data) {
			if(data.success) {
				var html="<option value=''>请选客户来源</option>"  ;
				for(var i=0;i<data.result.length;i++){
					html=html+"<option value='"+data.result[i].id+"'>"+data.result[i].sourceName+"</option>"
				}
				$("#cs").html(html);
			}else {
				alert(data.errorMessage);
			}				
		}
	});
}
function getCtypes(){
	$.ajax({
		url : "${ctx}/customerType/getAllList.do",
		type : "GET",
		data : {},
		success : function(data) {
			if(data.success) {
				var html="<option value=''>请选客户类型</option>"  ;
				for(var i=0;i<data.result.length;i++){
					html=html+"<option value='"+data.result[i].id+"'>"+data.result[i].typeName+"</option>"
				}
				$("#ct").html(html);
			}else {
				alert(data.errorMessage);
			}				
		}
	});
}
function getCconditions(){
	$.ajax({
		url : "${ctx}/customerCondition/getAllList.do",
		type : "GET",
		data : {},
		success : function(data) {
			if(data.success) {
				var html="<option value=''>请选客户状态</option>"  ;
				for(var i=0;i<data.result.length;i++){
					html=html+"<option value='"+data.result[i].id+"'>"+data.result[i].conditionName+"</option>"
				}
				$("#cc").html(html);
			}else {
				alert(data.errorMessage);
			}				
		}
	});
}
</script>
</html>